<template>
	<div class="wrapper xiangQing" id="wrapper-xiangQing">
		<myhead :activeIndex="`/knowledgeList?name=${knowledge}&id=${knowledgeId}`"></myhead>
		<div class="content center align-start fWrap">
			<div class="left flex">
				<!-- 左侧头部信息 -->
				<div class="bfff left-top">
					<div class="center title">
						<img src="@/assets/image/zhuTi/title.png" class="title-icon" alt="" />
						<div class="flex nowrap fbold f18 c333 title-size" :title="details.title">
							{{ details.title }}
						</div>
						<!-- <div class="return-button" @click="router.go(-1)">
							<el-button type="warning" round >返回列表</el-button>
						</div> -->
						<div class="collect title">
							<div v-if="details.updateAuthority" style="display: flex" @click="edit">
								<img
									src="@/assets/image/zhuTi/bian.png"
									style="cursor: pointer"
									class="bian-icon"
									alt=""
								/>
								<div class="f14 c333" style="cursor: pointer">编辑</div>
							</div>
							<div v-if="details.status == 1">
								<div class="collect-item" v-if="collectStatus == 2" @click="collect">
									<img src="@/assets/image/zhuTi/shouCang.png" class="bian-icon-two" alt="" />
									<div class="f14 c333" style="cursor: pointer">收藏</div>
								</div>
								<div class="collect-item" v-else @click="collect">
									<div v-if="collectStatus" style="display: flex">
										<img
											src="@/assets/image/zhuTi/shouCang1.png"
											class="bian-icon-two bian-icon-img"
											alt=""
										/>
										<div class="f14 c333" style="cursor: pointer">取消收藏</div>
									</div>
								</div>
							</div>
							<div class="return-button" @click="router.go(-1)" v-if="route.query.draft != 2">
								<el-button type="warning" round>返回</el-button>
							</div>
						</div>
					</div>
					<div class="c333">
						浏览（<span class="ctheme">{{ details.readCount }}</span
						>）<span class="c0c">|</span> 下载（<span class="cff7">{{ details.downloadCount }}</span
						>）<span class="c0c">|</span> 点评（<span class="c29">{{ details.commentsCount }}</span
						>）
					</div>

					<div class="hr"></div>
					<div class="flex-start">
						<div class="f16 c2c fbold label">
							<div class="tagLabel-title">标签</div>
						</div>
						<!-- <div v-if="tags.length > 10" class="zhankai" @click="tagsExpands">
							{{ tagsExpand ? "收起" : "展开" }}
							<el-icon class="pointer" size="18" color="#2972FA">
								<ArrowUp v-if="tagsExpand" />
								<ArrowDown v-else />
							</el-icon>
						</div> -->
						<div v-if="route.query.comment != 2">
							<div class="tag-box">
								<div
									class="center tag"
									v-for="(item, index) in tags"
									:key="item.id"
									@click="onTags(item)"
								>
									<img src="@/assets/image/zhuTi/biao.png" class="biao-icon" alt="" />
									<div class="f14 ctheme">{{ item.name }}</div>
								</div>
								<div v-if="tags.length >= 10" class="zhankai" @click="tagsExpands">
									{{ tagsExpand ? "收起" : "展开" }}
									<el-icon class="pointer" size="18" color="#2972FA">
										<ArrowUp v-if="tagsExpand" />
										<ArrowDown v-else />
									</el-icon>
								</div>
							</div>
						</div>
						<div v-else>
							<div class="tag-box">
								<div class="center tag" v-for="item in tags" :key="item.id" @click="onTags(item)">
									<img src="@/assets/image/zhuTi/biao.png" class="biao-icon" alt="" />
									<div class="f14 ctheme">{{ item }}</div>
								</div>
								<div v-if="tags.length > 10" class="zhankai" @click="tagsExpands">
									{{ tagsExpand ? "收起" : "展开" }}
									<el-icon class="pointer" size="18" color="#2972FA">
										<ArrowUp v-if="tagsExpand" />
										<ArrowDown v-else />
									</el-icon>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="hr"></div> -->
					<div class="center flex-start fWrap">
						<div class="f16 c2c fbold label">知识分类</div>
						<div class="cff9">{{ ctIdName }}</div>
					</div>
					<div class="expand-border">
						<div class="expand">
							<div class="expand-item" v-for="(item, index) in expand" :key="index">
								<div class="expand-items">
									<div class="f16 c2c fbold label">{{ item[0] }}</div>
									<div class="cff9">
										<!-- <el-tooltip effect="light" placement="top">
											<div slot="default">
												
											<div :title="item[1]" class="el-tooltip-one">{{ item[1] }}</div>
											</div>
											<template #content>
												<div style="width: 500px">{{ item[1] }}</div>
											</template>
										</el-tooltip> -->
										<div :title="item[1]" class="el-tooltip-one">{{ item[1] }}</div>
										<!-- </div> -->
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="zhaiyao">
						<div class="f16 fbold c2c mb10">摘要</div>
						<div class="c999" v-if="details.remark">{{ details.remark }}</div>
					</div>
				</div>
				<div id="pdfType"></div>
				<!-- pdf -->
				<div class="left-ppt">
					<div class="center title">
						<img src="@/assets/image/zhuTi/ppt.png" class="ppt-icon" alt="" />
						<template v-if="details.kbVideVersionDtos && details.kbVideVersionDtos.length">
							<div class="flex f18 c333" v-if="details.kbVideVersionDtos[fileIndex]">
								{{ details.kbVideVersionDtos[fileIndex].fileName }}
							</div>
						</template>
					</div>
					<v-preview-file :fileList="fileList" v-model="fileIndex" />
					<div
						class="watermark"
						:style="{
							background: 'url(' + watermark + ')',
						}"
					></div>
				</div>
				<!-- 附件列表 -->
				<div class="bfff left-file">
					<div class="f18 c333 fbold title">附件列表</div>
					<div class="center row xiazai">
						<div class="center hoverBtn" v-if="details.downloadAuthority">
							<img src="@/assets/image/zhuTi/pi.png" class="pi-icon" alt="" />
							<div class="ctheme f14" @click="batchDownload">批量下载</div>
						</div>
						<div class="center hoverBtn" v-if="details.downloadAuthority">
							<img src="@/assets/image/zhuTi/xiazai.png" class="pi-icon" alt="" />
							<div class="ctheme f14" @click="downloadAll">全部下载</div>
						</div>
					</div>
					<el-table
						@selection-change="tableChange"
						:data="details.kbVideVersionDtos"
						style="width: 100%"
						:height="400"
					>
						<el-table-column align="center" type="selection" min-width="30" />
						<el-table-column prop="fileName" min-width="200" label="附件名称">
							<template #default="{ row, $index }">
								<div @click="fileIndexClick($index)">
									{{ row.fileName }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="fileSize" min-width="200" label="附件大小">
							<template #default="{ row }">
								<div v-if="row.fileSize">{{ row.fileSize }}</div>
								<div v-else>正在解析...</div>
							</template>
						</el-table-column>
						<el-table-column min-width="150%">
							<template #default="{ row, $index }">
								<div style="display: flex">
									<div class="center hoverBtn">
										<el-tooltip class="box-item" effect="dark" content="查看" placement="top">
											<img
												src="@/assets/image/zhuTi/kan.png"
												@click="chakan($index)"
												class="pi-icon"
												alt=""
											/>
										</el-tooltip>
									</div>
									<div class="center hoverBtn" v-if="details.downloadAuthority">
										<el-tooltip class="box-item" effect="dark" content="下载" placement="top">
											<img
												src="@/assets/image/zhuTi/xia.png"
												class="pi-icon"
												alt=""
												@click="onA(row)"
											/>
										</el-tooltip>
									</div>
									<div class="center hoverBtn">
										<el-tooltip class="box-item" effect="dark" content="历史版本" placement="top">
											<img
												src="@/assets/image/zhuTi/banBen.png"
												class="pi-icon"
												alt=""
												@click="versionClickType(row)"
											/>
										</el-tooltip>
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="bfff version">
					<div class="f20">版本</div>
					<div class="f14">
						当前版本<span class="version-s">V{{ total }}.0</span>
					</div>
					<div class="version-table">
						<el-table :data="versionData" style="width: 100%" @cell-click="versionClick">
							<el-table-column align="center" type="index" label="序号" min-width="80" />
							<el-table-column align="center" prop="title" label="主题" min-width="200" />
							<el-table-column align="center" prop="createUserName" label="创建人" min-width="150" />
							<el-table-column align="center" label="版本" min-width="150">
								<template #default="{ row, $index }">
									<div>V{{ total - (current - 1) * pageSize - $index }}.0</div>
								</template>
							</el-table-column>
							<el-table-column align="center" prop="updateTime" label="修改时间" min-width="200">
								<template #default="{ row }">
									<div>
										{{ row.updateTime }}
									</div>
								</template>
							</el-table-column>
						</el-table>
						<div class="bfff pagination-class">
							<v-pagination
								:total="total"
								v-model:size="pageSize"
								v-model:page="current"
								:pageSizes="[5, 10, 15, 20]"
								@pagination="created"
								@paginations="created"
							></v-pagination>
						</div>
					</div>
				</div>
				<!-- 评论 -->
				<div class="bfff left-rating">
					<div class="f20 c333">评论</div>
					<el-input
						class="rating-input"
						type="textarea"
						show-word-limit
						:maxlength="400"
						v-model="oneReply"
						:placeholder="'请输入评论内容'"
					></el-input>
					<div class="center flex-end">
						<el-button
							type="primary"
							@click="onPublish"
							:loading="PublishLoading"
							:disabled="route.query.comment"
							>发表</el-button
						>
					</div>
					<div class="review" v-if="oneComments.length" v-infinite-scroll="load" infinite-scroll-delay="500">
						<div class="f18 review-title">评论</div>
						<div v-for="item in oneComments" :key="item.id" style="margin-bottom: 30px">
							<div class="firstLevelComments f16">
								<el-avatar :size="25" :src="item.avatar" v-if="item.avatar" />
								<img v-else src="@/assets/image/index/user.jpg" />
								<div class="firstLevelComments-name">{{ item.nickname }}</div>
								<div class="f14" style="padding-top: 3px">{{ item.createTime }}</div>
								<div class="hfsc">
									<div class="hfsc-dian-item f16" v-if="item.upStatus == 1" @click="like(item, '2')">
										<img
											src="@/assets/image/geRen/dianZan2.png"
											class="hfsc-dian-item-img"
											alt=""
										/>
									</div>
									<div class="hfsc-dian-item f16" v-else @click="like(item, '1')">
										<img src="@/assets/image/geRen/dianZan.png" alt="" />
									</div>
									<div @click="onReplyA(item)" class="hfsc-dian-item f16" style="cursor: pointer">
										<img src="@/assets/image/geRen/pingLun.png" alt="" />
									</div>
									<div
										@click="onDelPLA(item.id)"
										v-if="details.deleteCommentsAuthority"
										class="hfsc-dian-item f16"
										style="cursor: pointer"
									>
										<img src="@/assets/image/geRen/shanChu.png" alt="" />
									</div>
								</div>
							</div>
							<pre class="firstContenr">{{ item.content }}</pre>
							<template v-if="item.id == replyA">
								<div class="comments">
									<el-input
										class="comments-input"
										v-model="oneHF"
										type="textarea"
										:rows="2"
										show-word-limit
										:maxlength="400"
										:autosize="{
											minRows: 6,
											maxRows: 10,
										}"
										:placeholder="'请输入回复内容'"
									/>
									<div class="comments-button">
										<el-button type="primary" plain @click="returnOne"> 取消 </el-button>
										<el-button type="primary" @click="twoHFA(item)" :disabled="route.query.comment">
											回复
										</el-button>
									</div>
								</div>
							</template>
							<div v-if="item.id == sar ? true : false" class="erji f14">
								<div v-for="items in twoComments" :key="item.id" class="bor0">
									<div class="firstLevelComments-two">
										<div class="firstLevelComments-x">
											<div class="firstLevelComments-item">
												<el-avatar :size="25" :src="items.avatar" v-if="items.avatar" />
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.nickname }}</div>
											</div>
											<div class="huifu">回复</div>
											<div class="firstLevelComments-item">
												<el-avatar
													:size="25"
													:src="items.parentAvatar"
													v-if="items.parentAvatar"
												/>
												<img class="" v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.parentName }}</div>
												<div>{{ items.createTime }}</div>
											</div>
										</div>
										<div class="firstLevelComments-y">
											<div class="firstLevelComments-item">
												<el-avatar :size="25" :src="items.avatar" v-if="items.avatar" />
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.nickname }}</div>
											</div>
											<div class="huifu">回复</div>
											<div class="firstLevelComments-item">
												<el-avatar
													:size="25"
													:src="items.parentAvatar"
													v-if="items.parentAvatar"
												/>
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.parentName }}</div>
												<div>{{ items.createTime }}</div>
											</div>
										</div>
										<div class="hfsc">
											<div
												class="hfsc-dian f14"
												v-if="items.upStatus == 1"
												@click="likes(items, '2', item)"
											>
												<img
													src="@/assets/image/geRen/dianZan2.png"
													class="hfsc-dian-img"
													alt=""
												/>
											</div>
											<div class="hfsc-dian f14" v-else @click="likes(items, '1', item)">
												<img src="@/assets/image/geRen/dianZan.png" alt="" />
											</div>
											<div @click="onReplyB(items)" class="hfsc-dian f14" style="cursor: pointer">
												<img src="@/assets/image/geRen/pingLun.png" alt="" />
											</div>
											<div
												@click="onDelPLB(items.id, item.id)"
												v-if="details.deleteCommentsAuthority"
												class="hfsc-dian f14"
												style="cursor: pointer"
											>
												<img src="@/assets/image/geRen/shanChu.png" alt="" />
											</div>
										</div>
									</div>
									<pre class="firstLevelComments-two-content">{{ items.content }}</pre>
									<template v-if="items.id == replyB">
										<div class="comments">
											<el-input
												class="comments-input"
												v-model="twoHF"
												type="textarea"
												:rows="2"
												show-word-limit
												:maxlength="400"
												:autosize="{
													minRows: 6,
													maxRows: 10,
												}"
												:placeholder="'请输入回复内容'"
											/>
											<div class="comments-button">
												<el-button type="primary" plain @click="returnTwo"> 取消 </el-button>
												<el-button
													type="primary"
													@click="twoHFB(item)"
													:disabled="route.query.comment"
												>
													回复
												</el-button>
											</div>
										</div>
									</template>
								</div>
								<div class="twoPase" v-if="parseInt(twoCommenttotle / 1) > 1">
									<div class="twoPage-ye" @click="onToTwoPage(1)">上一页</div>
									<div
										v-for="(item, index) in parseInt(twoCommenttotle / 1)"
										:key="index"
										class="twoPase-page"
										:class="{
											active: index == twoIndex,
										}"
										@click="twoPage(index)"
									>
										{{ item }}
									</div>
									<div class="twoPage-ye" @click="onToTwoPage(2)">下一页</div>
								</div>
							</div>
							<div v-else>
								<div v-if="item.isReply == '1'" class="zhankai" @click="onZhan(item)">
									点击展开更多评论
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<jiben :details="details"></jiben>
				<yunci :yunCi.sync="resId.wordCloud"></yunci>
				<tuiJian :swId="resId.swId"></tuiJian>
			</div>
		</div>
		<v-myfoot></v-myfoot>
		<el-dialog
			v-model="dialogVisible"
			width="30%"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<div class="flex f24 fbold">提示</div>
					<el-icon class="pointer" size="20" color="#fff" @click="onGuan">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="jinggao">
				<img src="@/assets/image/index/jingGao.png" alt="" />
				<div class="jinggao-item">暂无权限，请联系管理员</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onGuan">返回上一级</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog
			v-model="versionType"
			class="dialog"
			title="版本"
			top="0"
			:before-close="quxiao"
			destroy-on-close
			:close-on-click-modal="false"
		>
			<div class="versionType">
				<div class="versionType-left">
					<div class="versionType-l f16">历史版本</div>
					<div
						v-for="(i, index) in history"
						class="versionType-left-item"
						:class="{ versionW: versionActive == index }"
						:key="index"
						@click="versionTypeClick(i, index)"
					>
						<div class="f14">
							<div class="version-flie">{{ i.fileName }}</div>
							<div>{{ time(i.createTime) }}{{ index }}</div>
						</div>
						<div class="version-tag">
							<el-tag
								><span>V{{ history.length - index }}.0</span></el-tag
							>
						</div>
					</div>
				</div>
				<div class="versionType-right">
					<div class="versionType-right-item" v-if="radio != 1">
						<div v-if="ifRameType" class="preview-file-loading">
							<div class="loading"></div>
							<div>加载中...</div>
						</div>
						<div v-else class="preview-file-ifR">
							<div class="preview-select">
								<el-select v-model="selectA" disabled placeholder="请选择历史版本">
									<el-option
										v-for="item in history"
										:label="item.fileName"
										:value="item.id"
										:key="item.id"
									/>
								</el-select>
								<div class="select-text">与</div>
								<div>
									<el-select v-model="selectB" placeholder="请选择历史版本" @change="selectChange">
										<el-option
											v-for="(item, index) in history"
											:label="item.fileName"
											:value="item.id"
											:key="item.id"
										>
											<div class="option-content">
												<div>{{ item.fileName }}</div>
												<el-tag>V{{ history.length - index }}.0</el-tag>
											</div>
										</el-option>
									</el-select>
								</div>
								<div class="select-text">对比</div>
							</div>
							<iframe :src="iframeUrl" style="width: 100%; height: 90%; margin-top: 50px"></iframe>
						</div>
					</div>
					<div v-else class="versionType-right-item">
						<div v-if="strUrl == null" class="version-iframe">
							<div v-if="versionLoading" class="preview-file-loading">
								<div class="loading"></div>
								<div>加载中...</div>
							</div>
							<v-md-preview v-else :text="strUrlMd"></v-md-preview>
						</div>
						<div v-else class="version-iframe">
							<div v-if="versionLoading" class="preview-file-loading">
								<div class="loading"></div>
								<div>加载中...</div>
							</div>
							<div v-else style="width: 100%; height: 100%">
								<div v-if="urlType == 'xlsx' || urlType == 'xls'" style="width: 100%; height: 100%">
									<div v-if="!excelWait" class="VueOfficeExcel-item">
										<div class="loading"></div>
										<div>加载中...</div>
									</div>
									<VueOfficeExcel v-else :src="strUrl" @rendered="rendered"></VueOfficeExcel>
								</div>
								<iframe v-else class="preview-file" :src="strUrl"></iframe>
							</div>
						</div>
					</div>
					<div class="versionType-right-button">
						<div>
							<el-radio-group v-model="radio" class="ml-4" @change="radioChange">
								<el-radio label="1">全文</el-radio>
								<el-radio label="2">与上个版本的差异</el-radio>
							</el-radio-group>
						</div>
						<div>
							<el-button @click="quxiao" type="primary">关闭</el-button>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { Star, StarFilled, Delete, ChatDotSquare } from "@element-plus/icons-vue"
import tuiJian from "./components/tuijian.vue"
import jiben from "./components/jiben.vue"
import yunci from "./components/yunci.vue"
import jiazai from "./components/jiaZai.vue"
import { getAxios, postAxios } from "/axios"
import { ElMessage, ElMessageBox, ElNotification } from "element-plus"
import { useUserInfoStore } from "/store/userInfo"
import { Base64 } from "js-base64"
import VueOfficeExcel from "@vue-office/excel"
import "@vue-office/excel/lib/index.css"

const route = useRoute()
const router = useRouter()
const excelWait = ref(false)
const checked1 = ref(false)
const urlType = ref("")
//分类
const ctIdName = ref("")
// const ctId = ref("")
const checkedList = ref([])
//展开评论
const sar = ref("")
//展开标签
const tagsExpand = ref(false)
//初始数据
const details = ref({})
const dialogVisible = ref(false)
//标签
const tags = ref([])
//版本控制
const versionData = ref([])
const cloud = ref([])
const collectStatus = ref(null)
//预览
const fileList = ref([])
//一级评论分页
const commentsPage = ref(1)
//一级评论
const oneComments = ref([])
//二级评论
const twoComments = ref([])
//添加一级评论
const oneReply = ref("")
//一级回复
const oneHF = ref("")
const twoHF = ref("")
const replyA = ref("")
//二级回复
const replyB = ref("")
const expandList = ref([])
const expandCols = ref([])
const fileIndex = ref(0)
const PublishLoading = ref(false)
//表格
const multipleTableRef = ref()
const expand = ref([])
const resId = ref({})
const versionType = ref(false)
const versionActive = ref(0)
const radio = ref("1")
//版本分页
const total = ref(null)
const pageSize = ref(5)
const current = ref(1)
//历史版本
const history = ref([])
const iframeUrl = ref("")
const ifRameType = ref(false)
const stagingArr = ref([])
const toLoading = ref(false)
const selectA = ref("")
const selectB = ref("")
const watermark = ref("")
const strUrl = ref(null)
const strUrlMd = ref("")
const strUrlText = ref("")
const oneCommentsList = ref(0)
const versionLoading = ref(true)
const twoIndex = ref(0)
async function list() {
	if (route.query.draft) {
		resId.value = await getAxios(`/knowledge/kbBasicHistory/findBasic?id=${route.query.id}&num=1`)
	} else {
		if (typeof window.c != "undefined") {
			resId.value = window.c
		} else {
			resId.value = await getAxios(`/kb/kbBasic/findBasic?id=${route.query.id}&num=1`)
		}
	}
	details.value = resId.value
	collectStatus.value = +details.value.collectStatus
	if (resId.value.kbVideVersionDtos != null) {
		fileList.value = resId.value.kbVideVersionDtos // null
	}
	expandList.value = resId.value.cols
	expandCols.value = resId.value.propCols
	const ctId = resId.value.ctId
	if (route.query.comment != 2) {
		const res = await getAxios(`/knowledge/kbBasicLabel/list?bId=${resId.value.id}`)
		tags.value = res.splice(0, 10)
	} else {
		if (resId.value.labelRes) {
			tags.value = resId.value.labelRes
		} else {
			tags.value = []
		}
	}
	const { records } = await getAxios(`/knowledge/kbCategory/page?swId=${resId.value.swId}`)
	const classification = records
	classification.forEach(item => {
		if (item.id == ctId) {
			ctIdName.value = item.name
		}
	})

	oneComments.value = await getAxios(`/knowledge/kbComment/pageKbComment?basicId=${resId.value.id}&current=1&size=10`)
	oneCommentsList.value = oneComments.value.length + 1
	if (expandCols.value != null) {
		expandCols.value.forEach(item => {
			if (item.formType != 4) {
				if (item.formType == 3) {
					if (expandList.value[item.propName]) {
						return expand.value.push([item.name, expandList.value[item.propName].substring(0, 10)])
					}
				}
				expand.value.push([item.name, expandList.value[item.propName]])
			}
		})
	}
}
list()
function time(times) {
	return times.substring(0, 16)
}
async function created() {
	if (!route.query.time) {
		const str = await getAxios(
			`/knowledge/kbBasicHistory/page?bId=${route.query.id}&current=${current.value}&size=${pageSize.value}`
		)
		total.value = +str.total
		versionData.value = str.records
		let versionList = versionData.value[versionData.value.length - 1]
		versionData.value.pop()
		versionData.value.unshift(versionList)
	} else {
		const str = await getAxios(
			`/knowledge/kbBasicHistory/page?bId=${route.query.bId}&current=${current.value}&size=${pageSize.value}&createTime=${route.query.time}`
		)
		total.value = +str.total
		versionData.value = str.records
	}
}
created()
//编辑
const edit = () => {
	router.push({ path: "/knowledgeEditing", query: { id: resId.value.id, swId: resId.value.swId } })
}
//查看
const chakan = index => {
	fileIndex.value = index
	let anchorElement = document.getElementById("pdfType")
	if (anchorElement) {
		anchorElement.scrollIntoView()
	}
}
//版本单击
const versionClick = val => {
	if (route.query.id == val.id) {
		handleScroll()
	} else {
		window.open(
			`/knowledgeDetails?id=${val.id}&bId=${val.bId}&swId=${val.swId}&draft=2&time=${val.createTime}&comment=${2}`
		)
	}
}
const twoCommentPage = ref(1)
const twoCommenttotle = ref(0)
const onZhan = async item => {
	sar.value = item.id
	twoPin(item.id, twoCommentPage.value)
}

const timeCL = item => {
	return item.substring(0, 10)
}

const onPublish = async () => {
	if (details.value.status == 2) {
		oneReply.value = ""
		return ElMessage.error("未发布不允许评论")
	} else {
		if (oneReply.value == "") {
			ElMessage.error("请输入评论内容")
			return
		}
		PublishLoading.value = true
		try {
			await postAxios("/knowledge/kbComment/save", {
				content: oneReply.value,
				basicId: resId.value.id,
				parentId: "",
			})
			oneReply.value = ""
			onePin(resId.value.id, oneCommentsList.value)
		} catch (error) {
			ElNotification({
				title: "提示",
				message: error,
				type: "error",
			})
		} finally {
			PublishLoading.value = false
		}
	}
}
async function onePin(val, size) {
	try {
		oneComments.value = await getAxios(`/knowledge/kbComment/pageKbComment?basicId=${val}&current=1&size=${size}`)
		oneCommentsList.value = oneComments.value.length + 1
	} catch (error) {
		ElMessage.error(error)
	}
}
async function twoPin(val, size) {
	try {
		const res = await getAxios(`/knowledge/kbComment/findByParentId?id=${val}&size=10&current=${size}`)
		twoComments.value = res.records
		twoCommenttotle.value = (+res.total + 10 - 1) / 10
	} catch (error) {
		ElMessage.error(error)
	}
}

//一级回复
const onReplyA = async item => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许评论")
	} else {
		replyA.value = item.id
	}
}

const twoHFA = async item => {
	if (oneHF.value == "") {
		ElMessage.error("请输入回复内容")
		return
	}
	toLoading.value = true
	sar.value = item.id
	try {
		await postAxios("/knowledge/kbComment/save", {
			content: oneHF.value,
			basicId: resId.value.id,
			parentId: replyA.value,
		})
		replyA.value = ""
		oneHF.value = ""
		onePin(resId.value.id, oneCommentsList.value)
		twoPin(item.id, twoCommentPage.value)
	} catch (error) {
		ElNotification({
			title: "提示",
			message: error,
			type: "error",
		})
	} finally {
		toLoading.value = false
	}
}
const fileIndexClick = index => {
	fileIndex.value = index
}
//二级回复
const onReplyB = item => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许评论")
	} else {
		replyA.value = ""
		replyB.value = item.id
	}
}
const twoHFB = async item => {
	if (twoHF.value == "") {
		ElMessage.error("请输入回复内容")
		return
	}
	await postAxios("/knowledge/kbComment/save", {
		content: twoHF.value,
		basicId: resId.value.id,
		parentId: replyB.value,
	})
	replyB.value = ""
	twoHF.value = ""
	ctwoPin(item.id, twoCommentPage.value)
}
//一级评论删除
const onDelPLA = id => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许删除")
	} else {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			await deleteAxios(`/knowledge/kbComment/deleteBatch?id=${id}`)
			onePin(resId.value.id, oneCommentsList.value)
		})
	}
}
//二级评论删除
const onDelPLB = (id, fuId) => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许删除")
	} else {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			await deleteAxios(`/knowledge/kbComment/delete?id=${id}`)
			twoPin(fuId, twoCommentPage.value)
			if (twoComments.value.length == 0) {
				sar.value = ""
				onePin(resId.value.id, oneCommentsList.value)
			}
		})
	}
}
const onA = async val => {
	let aList = []
	aList.push(val)
	const elnot = ElNotification({
		icon: jiazai,
		message: "正在下载",
		position: "bottom-right",
	})
	try {
		const res = await postAxios(
			"/knowledge/kbBasicUser/insertDownload",
			{
				bId: resId.value.id,
				vides: aList.map(item => item.id),
			},
			{
				download: {
					filename:
						aList.length == 1
							? val.fileName.substring(0, val.fileName.lastIndexOf("."))
							: details.value.title,
				},
			}
		)
		elnot.close()
		ElNotification({
			message: "下载完成",
			type: "success",
			position: "bottom-right",
		})
	} catch (error) {
		elnot.close()
		ElNotification({
			message: "下载失败",
			type: "error",
			position: "bottom-right",
		})
	}
}
const handleScroll = () => {
	document.getElementById("wrapper-xiangQing").scrollTop = 0
}
const handleScrollCK = () => {
	document.getElementById("wrapper-xiangQing").scrollTop = 1300
}
watch(
	() => route.query,
	() => {
		localStorage.removeItem("knowledgeDetails")
		handleScroll()
		list()
	}
)

//批量下载
const batchDownload = async () => {
	if (stagingArr.value.length == 0) {
		ElMessage.error("请勾选...")
		return
	}
	const elnot = ElNotification({
		icon: jiazai,
		message: "正在下载",
		position: "bottom-right",
	})
	try {
		const res = await postAxios(
			"/knowledge/kbBasicUser/insertDownload",
			{
				bId: resId.value.id,
				vides: stagingArr.value.map(item => item.id),
			},
			{
				download: {
					filename:
						stagingArr.value.length == 1
							? stagingArr.value[0].fileName.substring(0, stagingArr.value[0].fileName.lastIndexOf("."))
							: details.value.title,
				},
			}
		)
		elnot.close()
		ElNotification({
			message: "下载完成",
			type: "success",
			position: "bottom-right",
		})
	} catch (error) {
		elnot.close()
		ElNotification({
			message: "下载失败",
			type: "error",
			position: "bottom-right",
		})
	}
}
const downloadAll = async () => {
	const elnot = ElNotification({
		icon: jiazai,
		message: "正在下载",
		position: "bottom-right",
	})
	try {
		const res = await postAxios(
			"/knowledge/kbBasicUser/insertDownload",
			{
				bId: resId.value.id,
				vides: details.value.kbVideVersionDtos.map(item => item.id),
			},
			{
				download: {
					// type: stagingArr.value.length == 1 ? "pdf" : "zip",
					filename:
						details.value.attachments.length == 1
							? details.value.attachments[0].name.substring(
									0,
									details.value.attachments[0].name.split("").lastIndexOf(".")
							  )
							: details.value.title,
				},
			}
		)
		elnot.close()
		ElNotification({
			message: "下载完成",
			type: "success",
			position: "bottom-right",
		})
	} catch (error) {
		elnot.close()
		ElNotification({
			message: "下载失败",
			type: "error",
			position: "bottom-right",
		})
	}
}
const onGuan = () => {
	router.go(-1)
}
const tableChange = selection => {
	stagingArr.value = []
	stagingArr.value = selection
}
const collect = async () => {
	if (collectStatus.value == 1) {
		collectStatus.value = 2
	} else {
		collectStatus.value = 1
	}
	await postAxios("/knowledge/kbCollect/save", {
		basicId: details.value.id,
		type: 1,
		status: collectStatus.value,
	})
}
const like = async (val, status) => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许点赞")
	} else {
		await postAxios(`/knowledge/kbThumbsUp/save`, {
			commentId: val.id,
			status: status,
			basicId: details.value.id,
		})
		onePin(resId.value.id, oneCommentsList.value)
	}
}
const likes = async (val, status, item) => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许点赞")
	} else {
		await postAxios(`/knowledge/kbThumbsUp/save`, {
			commentId: val.id,
			status: status,
			basicId: details.value.id,
		})
		twoPin(item.id, twoCommentPage.value)
	}
}
const onTags = item => {
	router.push({ path: "/search", query: { tag: item.name, tags: "04", active: 1 } })
}
const returnTwo = () => {
	twoHF.value = ""
	replyB.value = ""
}
const returnOne = () => {
	oneHF.value = ""
	replyA.value = ""
}
onUnmounted(() => {
	localStorage.removeItem("knowledgeDetails")
	window.c = undefined
})

const userInfoStore = useUserInfoStore()
const userInfo = computed(() => userInfoStore.userInfo)
const watermarkText = `${userInfo.value.loginName} ${new Date().getFullYear()}-${
	new Date().getMonth() + 1
}-${new Date().getDate()}`

function generateWatermark() {
	const canvas = document.createElement("canvas")
	const ctx = canvas.getContext("2d")
	ctx.font = `20px sans-serif`
	const textWidth = ctx.measureText(watermarkText).width + 80
	const textHeight = 150
	canvas.width = textWidth
	canvas.height = textHeight
	ctx.textAlign = "center"
	ctx.font = `20px sans-serif`
	ctx.textBaseline = "middle"
	ctx.fillStyle = "rgba(0, 0, 0, 0.15)"
	ctx.fillText(watermarkText, textWidth / 2, textHeight / 2)
	watermark.value = canvas.toDataURL("image/png")
}
generateWatermark()
async function switchVer(val, translate) {
	switch (translate) {
		case "pdf":
			const result = await postAxios(
				"/knowledge/kbBasicUser/fileShow",
				{
					bId: val.bId,
					vides: [val.id],
				},
				{
					blob: true,
				}
			)
			versionLoading.value = false
			if (result) {
				const blob = new Blob([result], { type: "application/pdf" })
				strUrl.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
			}
			break
		case "jpg":
		case "jpeg":
		case "png":
		case "gif":
		case "bmp":
			const resultImg = await postAxios(
				"/knowledge/kbBasicUser/fileShow",
				{
					bId: val.bId,
					vides: [val.id],
				},
				{
					blob: true,
				}
			)
			versionLoading.value = false
			if (resultImg) {
				const blob = new Blob([resultImg], { type: "image/" + translate })
				strUrl.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
			}
			break
		case "svg":
			const resultSvg = await postAxios(
				"/knowledge/kbBasicUser/fileShow",
				{
					bId: val.bId,
					vides: [val.id],
				},
				{
					blob: true,
				}
			)
			versionLoading.value = false
			if (resultSvg) {
				const blob = new Blob([resultSvg], { type: "image/svg+xml" })
				strUrl.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
			}
			break
		case "xls":
		case "xlsx":
			versionLoading.value = false
			try {
				const strU = await getAxios(`/knowledge/kbVideVersion/filePreviewBase?id=${val.id}`)
				strUrl.value = await getAxios(
					strU,
					{},
					{
						blob: true,
					}
				)
				excelWait.value = true
			} catch (error) {}
			break
		case "md":
			strUrl.value = null
			try {
				const res = await getAxios(`/knowledge/kbVideVersion/filePreviewBase?id=${val.id}`)
				strUrlMd.value = Base64.decode(res)
				versionLoading.value = false
			} catch (error) {}
			break
		case "ppt":
		case "pptx":
			const resultPpt = await postAxios(
				"/knowledge/kbBasicUser/fileShow",
				{
					bId: val.bId,
					vides: [val.id],
				},
				{
					blob: true,
				}
			)
			versionLoading.value = false
			if (resultPpt) {
				const blob = new Blob([resultPpt], { type: "application/vnd.ms-powerpoint" })
				strUrl.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
			}
			break
		case "doc":
		case "docx":
			const results = await postAxios(
				"/knowledge/kbBasicUser/fileShow",
				{
					bId: val.bId,
					vides: [val.id],
				},
				{
					blob: true,
				}
			)
			versionLoading.value = false
			if (results) {
				const blob = new Blob([results], { type: "application/msword" })
				strUrl.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
			}
			break
		default:
			let setTime = setTimeout(function () {
				versionLoading.value = false
				clearTimeout(setTime)
			}, 2000)
			strUrl.value =
				import.meta.env.VITE_APP_SERVICE_URL + "/knowledge/kbVideVersion/filePreview?" + "id=" + val.id
			break
	}
}
const tagIndex = ref(10)
//展开标签
const tagsExpands = async () => {
	tagsExpand.value = !tagsExpand.value
	if (tagsExpand.value) {
		tags.value = await getAxios(`/knowledge/kbBasicLabel/list?bId=${resId.value.id}`)
	} else {
		const res = await getAxios(`/knowledge/kbBasicLabel/list?bId=${resId.value.id}`)
		tags.value = res.splice(0, 10)
	}

	// tagsExpand.value = !tagsExpand.value
}
//显示版本
const versionClickType = async val => {
	const translate = val.fileName.split(".").pop()
	urlType.value = translate
	versionType.value = true
	if (!route.query.time) {
		var res = await getAxios(`/knowledge/kbVideVersion/findByTypeVersion?bId=${val.bId}&type=${val.type}`)
	} else {
		var res = await getAxios(`/knowledge/kbVideVersion/findByTypeVersion?bId=${val.baId}&type=${val.type}`)
	}
	history.value = res
	selectA.value = res[0].id
	switchVer(val, translate)
	if (history.value.length == 1) {
		iframeUrl.value =
			import.meta.env.VITE_APP_SERVICE_URL +
			"/knowledge/kbVideVersion/getContentComparison?" +
			"sourceId=" +
			history.value[0].id +
			"&targetId=" +
			history.value[0].id
	} else {
		iframeUrl.value =
			import.meta.env.VITE_APP_SERVICE_URL +
			"/knowledge/kbVideVersion/getContentComparison?" +
			"sourceId=" +
			history.value[0].id +
			"&targetId=" +
			history.value[1].id
	}
}
//点击版本
const versionTypeClick = (val, index) => {
	selectA.value = val.id
	ifRameType.value = true
	radio.value = "1"
	if (versionActive.value != index) {
		excelWait.value = false
		versionActive.value = index
	}
	const translate = val.fileName.split(".").pop()
	if (translate != "xlsx" && translate != "xls") {
		versionLoading.value = true
	}
	urlType.value = translate
	switchVer(val, translate)
	if (index == history.value.length - 1) {
		iframeUrl.value =
			import.meta.env.VITE_APP_SERVICE_URL +
			"/knowledge/kbVideVersion/getContentComparison?" +
			"sourceId=" +
			val.id +
			"&targetId=" +
			val.id
	} else {
		iframeUrl.value =
			import.meta.env.VITE_APP_SERVICE_URL +
			"/knowledge/kbVideVersion/getContentComparison?" +
			"sourceId=" +
			val.id +
			"&targetId=" +
			history.value[index + 1].id
	}
	let setTime = setTimeout(function () {
		ifRameType.value = false
		clearTimeout(setTime)
	}, 2000)
}
const quxiao = () => {
	versionType.value = false
	versionLoading.value = true
	iframeUrl.value = ""
	versionActive.value = 0
	urlType.value = ""
}
const radioChange = () => {
	if (radio.value == 2) {
		versionLoading.value = true
		ifRameType.value = true
		let setTime = setTimeout(function () {
			ifRameType.value = false
			clearTimeout(setTime)
		}, 1000)
	} else {
		let setTime = setTimeout(function () {
			versionLoading.value = false
			clearTimeout(setTime)
		}, 1000)
	}
}

const rendered = () => {
	excelWait.value = true
}
const selectChange = () => {
	ifRameType.value = true
	let setTime = setTimeout(function () {
		ifRameType.value = false
		clearTimeout(setTime)
	}, 2000)
	iframeUrl.value =
		import.meta.env.VITE_APP_SERVICE_URL +
		"/knowledge/kbVideVersion/getContentComparison?" +
		"sourceId=" +
		selectA.value +
		"&targetId=" +
		selectB.value
}

//滚动加载
const load = async () => {
	commentsPage.value += 1
	const res = await getAxios(
		`/knowledge/kbComment/pageKbComment?basicId=${resId.value.id}&current=${commentsPage.value}&size=10`
	)
	oneComments.value = [...oneComments.value, ...res]
	oneCommentsList.value = oneComments.value.length + 1
}

//二级分页
const twoPage = async index => {
	twoIndex.value = index
	twoCommentPage.value = index + 1
	twoPin(sar.value, twoCommentPage.value)
}
const onToTwoPage = async val => {
	if (twoCommentPage.value == 1 && val == 1) {
		return ElMessage.error("当前为第一页")
	}
	if (twoCommentPage.value == parseInt(twoCommenttotle.value) && val == 2) {
		return ElMessage.error("当前为最后一页")
	}
	if (val == 1) {
		twoIndex.value -= 1
		twoCommentPage.value -= 1
	} else {
		twoIndex.value += 1
		twoCommentPage.value += 1
	}
	twoPin(sar.value, twoCommentPage.value)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.review {
	.review-title {
		margin-bottom: 20px;
	}
}
.xiangQing {
	background-color: #f8f8f8;
	.version {
		margin: 10px 0;
		padding: 30px 40px;
		.f20 {
			border-bottom: 1px solid #eceef5;
			margin-bottom: 20px;
		}
		.version-s {
			margin-left: 20px;
		}
		.version-table {
			margin-top: 10px;
			.pagination-class {
				margin-top: 15px;
				display: flex;
				justify-content: center;
			}
			:deep(.el-table__row) {
				cursor: pointer;
			}
		}
	}
	.left-rating {
		padding: 30px 40px;
		@include maxWidth(500) {
			padding: 2vw 2vh;
		}
		.firstLevelComments {
			position: relative;
			display: flex;
			width: 100%;
			// height: 50px;
			img {
				width: 25px;
				height: 25px;
			}
			.firstLevelComments-name {
				margin: 0 10px;
			}

			.hfsc {
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				.hfsc-dian-item {
					width: 20px;
					height: 20px;
					cursor: pointer;
					margin-right: 15px;
					@include maxWidth(768) {
						margin-right: 5px;
					}
					img {
						width: 100%;
						height: 100%;
					}
					.hfsc-dian-item-img {
						-webkit-animation: xing 0.3s linear;
					}
					@keyframes xing {
						0% {
							transform: scale(1);
						}
						75% {
							transform: scale(1.5);
						}
					}
				}
				.hfsc-dian {
					width: 20px;
					height: 20px;
					cursor: pointer;
					margin-right: 15px;
					@include maxWidth(768) {
						margin-right: 5px;
					}
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.comments {
			margin: 10px;
			// position: relative;
			.comments-button {
				display: flex;
				justify-content: flex-end;
				margin-top: 10px;
				// position: absolute;
				// right: 70px;
				// bottom: 10px;
			}
			// .comments-button-qx {
			// position: absolute;
			// right: 150px;
			// bottom: 10px;
			// }
		}
		.firstContenr {
			margin: 5px 0;
			padding-left: 32px;
			font-family: "微软雅黑";
			white-space: pre-wrap;
		}
		.zhankai {
			font-size: 14px;
			width: 100%;
			text-align: center;
			padding-bottom: 10px;
			cursor: pointer;
		}
		.erji {
			background-color: #f4f4f4;
			padding: 5px;
			padding-top: 20px;
			.firstLevelComments-two {
				position: relative;
				padding-left: 30px;
				display: flex;

				.firstLevelComments-y {
					display: none;
					@include maxWidth(768) {
						display: block;
					}
				}
				.firstLevelComments-item {
					display: flex;
					// font-size: 14px;
					height: 30px;
					line-height: 30px;
					margin-left: 5px;
					.firstLevelComments-name {
						padding: 0 5px;
					}
					img {
						width: 25px;
						height: 25px;
					}
				}
				.hfsc {
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					div {
						margin-right: 5px;
					}
					.hfsc-dian {
						width: 1.3em;
						height: 1.3em;
						cursor: pointer;
						img {
							width: 100%;
							height: 100%;
						}
						.hfsc-dian-img {
							-webkit-animation: xing 0.3s linear;
						}
						@keyframes xing {
							0% {
								transform: scale(1);
							}
							75% {
								transform: scale(1.5);
							}
						}
					}
				}

				.huifu {
					height: 20px;
					font-size: 12px;
					line-height: 30px;
					@include maxWidth(768) {
						height: 30px;
						padding-left: 20px;
					}
				}
			}
			.twoPase {
				display: flex;
				padding-bottom: 10px;
				padding-left: 36px;
				.twoPage-ye {
					cursor: pointer;
				}
				.twoPase-page {
					padding: 0 5px;
					cursor: pointer;
					&:hover {
						color: #2972fa;
					}
				}
				.active {
					color: #2972fa;
				}
			}
		}

		.firstLevelComments-two-content {
			font-size: 14px;
			margin: 0 65px;
			padding: 0 0 1px 0;
			font-family: "微软雅黑";
			white-space: pre-wrap;
		}
		.hr {
			height: 4px;
			background: #f8f8f8;
			margin: 15px 0 23px;
		}

		:deep(.el-textarea .el-input__count) {
			bottom: 20px;
			right: 10px;
			color: #909399;
		}

		:deep(.rating-input .el-textarea__inner) {
			height: 200px;
			border-radius: 3px;
			margin: 20px 0 12px;
		}
	}

	.left-file {
		padding: 30px 25px;
		margin: 15px 0;

		.ppt-icon {
			width: 15px;
			margin-right: 25px;
		}

		.pi-icon {
			cursor: pointer;
			width: 18px;
			height: 15px;
			margin: 0 10px 0 25px;
		}

		.row {
			padding: 15px 0;
			border-bottom: 1px solid #eceef5;
		}
		.xiazai {
			justify-content: right;
		}
		.title {
			border-bottom: 1px solid #eceef5;
		}
	}

	.left-ppt {
		margin-top: 15px;
		position: relative;
		overflow: hidden;

		.ppt-icon {
			width: 20px;
			margin-right: 10px;
		}

		.title {
			background-color: #f5f6fa;
			padding: 15px 25px;
		}
		.watermark {
			position: absolute;
			top: -50%;
			bottom: 0;
			right: 0;
			left: -50%;
			z-index: 99;
			width: 200%;
			height: 200%;
			pointer-events: none;
			transform: rotate(-45deg);
			transform-origin: center;
		}
	}

	.left-top {
		padding: 20px 25px;
		.expand-border {
			.expand {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.expand-item {
					// display: flex;
					// flex-wrap: wrap;
					width: 45%;
					.expand-items {
						display: flex;
						padding: 15px 0;
						border-bottom: 1px dashed #eceef5;

						.cff9 {
							width: 80%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							.el-tooltip-one {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
		> .title {
			margin-bottom: 15px;
		}
		.collect {
			// width: 100%;
			display: flex;
			justify-content: end;
			cursor: pointer;
			align-items: center;
			gap: 15px;
			.collect-item {
				display: flex;
				justify-content: center;
				align-items: center;
				span {
					margin-left: 20px;
				}
			}
		}
		.label {
			padding-right: 20px;
			white-space: nowrap;
		}
		.tagLabel {
			// position: absolute;
			position: relative;
			width: 30px;
			height: 50px;
			.tagLabel-title {
				position: absolute;
				top: 10px;
				left: 0;
			}
		}
		.biao-icon {
			width: 15px;
			margin-right: 5px;
		}
		.flex-start {
			display: flex;
			padding: 15px 0;
			border-bottom: 1px dashed #eceef5;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.tag-box {
			// margin-left: 50px;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			// flex: 1;
			// margin-left: 50px;
			.zhankai {
				// position: absolute;
				// right: 0;
				// bottom: 10px;
				margin-left: 10px;
				cursor: pointer;
				display: flex;
				align-items: center;
				color: #2972fa;
			}
			.tag {
				cursor: pointer;
				height: 28px;
				background: rgba(41, 114, 250, 0.1);
				border-radius: 3px;
				padding: 0 10px;
				margin: 0 5px 10px;
				@include maxWidth(800) {
					margin: px2vw(15) px2vw(5);
				}
			}
		}

		.hr {
			border-bottom: 1px dashed #eceef5;
			margin: 15px 10px 5px 10px;

			&:nth-of-type(2) {
				margin: 15px 10px;
			}
		}

		// .title {
		// 	padding-bottom: 0.4rem;
		// }

		.bian-icon {
			width: 16px;
			margin-right: 10px;
			object-fit: contain;
		}
		.bian-icon-two {
			width: 20px;
			margin-right: 8px;
		}
		.bian-icon-img {
			-webkit-animation: xing 0.3s linear;
		}
		@keyframes xing {
			0% {
				transform: scale(1);
			}
			75% {
				transform: scale(1.5);
			}
		}
		.title-icon {
			width: 30px;
			margin-right: 10px;
			@include maxWidth(800) {
				width: 25px;
			}
			@include maxWidth(600) {
				width: 20px;
			}
		}
		.title-size {
			@include maxWidth(800) {
				font-size: 20px;
			}
			@include maxWidth(600) {
				font-size: 18px;
			}
		}
		.zhaiyao {
			margin-top: 15px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.c999 {
				word-break: break-word;
			}
		}
	}

	.content {
		margin: 20px auto;
		width: 95%;
		max-width: 1440px;
	}
}
.jinggao {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.jinggao-item {
		padding-top: 20px;
		font-size: 24px;
	}
}
.right {
	@include maxWidth(1200) {
		width: 180px;
	}
	@include maxWidth(1024) {
		display: none;
	}
}
.return-button {
	// margin-right: 20px;
	// margin-top: 15px;
	display: flex;
	justify-content: flex-end;
	@include maxWidth(800) {
		// display: none;
	}
}
.firstLevelComments-x {
	display: flex;
	@include maxWidth(768) {
		display: none;
	}
}
.bor0 {
	padding-bottom: 20px;
	@include maxWidth(768) {
		padding-bottom: 1vh;
		border-bottom: 2px dashed #fff;
		margin-bottom: 1vh;
		&:last-child {
			border: 0;
		}
	}
}
:deep(.dialog) {
	width: 90vw !important;
	height: 85vh !important;
	margin-top: 5vh;

	@include maxWidth(1400) {
		width: 1000px !important;
	}
	.el-dialog__body {
		padding: 0;
		height: 100%;
	}
}
.versionType {
	z-index: 100;
	display: flex;
	height: 100%;
	.versionType-left {
		overflow-y: scroll;
		width: 250px;
		margin-right: 20px;
		.versionType-l {
			padding: 20px 0 10px 10px;
			font-weight: 700;
		}
		.versionType-left-item {
			cursor: pointer;
			padding: 5px 0;
			display: flex;
			padding-left: 20px;
			padding-right: 5px;
			justify-content: space-between;
			.version-tag {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.version-flie {
				width: 110px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.versionW {
			position: relative;
			background-color: #f3f3f3;
			&::before {
				content: "";
				position: absolute;
				width: 5px;
				height: 100%;
				left: 0;
				top: 0;
				background-color: #2972fa;
			}
		}
	}
	.versionType-right {
		position: relative;
		flex: 1;
		margin: 1vh 2vw;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		// display: flex;
		// flex-direction: column;
		// justify-content: space-around;
		// overflow-y: scroll;
		.versionType-right-item {
			width: 100%;
			height: 88%;
			background-color: #fff;
			border: 1px solid #bbb;
			border-radius: 2px;
			// padding: 15px 10px;
			overflow-y: scroll;
			.preview-file-ifR {
				width: 100%;
				height: 100%;
				position: relative;
				.preview-select {
					position: absolute;
					top: 0;
					left: 30%;
					padding: 5px 0;
					display: flex;
					justify-content: center;
					align-items: center;
					@include maxWidth(1400) {
						left: 20%;
					}
					.select-text {
						padding: 0 5px;
					}
				}
			}
			.edH {
				height: 100%;
			}
			.version-iframe {
				position: relative;
				width: 100%;
				height: 100%;
				.preview-file {
					width: 100%;
					height: 100%;
				}
				.VueOfficeExcel-item {
					width: 100%;
					max-height: 100vh;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border: 0;
					background-color: #d4d4d7;
					.loading {
						width: 45px;
						height: 45px;
						display: inline-block;
						padding: 0px;
						border-radius: 100%;
						border: 5px solid;
						border-top-color: rgba(41, 114, 250, 1);
						border-bottom-color: rgba(41, 114, 250, 0.1);
						border-left-color: rgba(41, 114, 250, 1);
						border-right-color: rgba(41, 114, 250, 0.1);
						animation: loading-animation 1s ease-in-out infinite;
					}

					@keyframes loading-animation {
						from {
							transform: rotate(0deg);
						}
						to {
							transform: rotate(360deg);
						}
					}
				}
			}
			.preview-file-loading {
				width: 100%;
				max-height: 100vh;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 0;
				background-color: #d4d4d7;
				.loading {
					width: 45px;
					height: 45px;
					display: inline-block;
					padding: 0px;
					border-radius: 100%;
					border: 5px solid;
					border-top-color: rgba(41, 114, 250, 1);
					border-bottom-color: rgba(41, 114, 250, 0.1);
					border-left-color: rgba(41, 114, 250, 1);
					border-right-color: rgba(41, 114, 250, 0.1);
					animation: loading-animation 1s ease-in-out infinite;
				}

				@keyframes loading-animation {
					from {
						transform: rotate(0deg);
					}
					to {
						transform: rotate(360deg);
					}
				}
			}
		}
		.versionType-right-button {
			// padding-top: 20px;
			// position: absolute;
			// bottom: 50px;
			// left: 0;
			// margin-top: 10px;
			width: 100%;
			display: flex;
			height: 100px;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
		}
	}
}
.option-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
</style>
